<template>
  <div style="background-color: #fff">
    <div
      v-for="(item, index) in modelList"
      :class="item.selected ? 'single-model-container selected-model' : 'single-model-container'"
      :key="index"
      @click="selectModel(index, item)"
    >
      <div class="single-model">
        <!-- <div class="model-img"><img :src="'@/assets/ico/icon' + index + '.png'" /></div>-->
        <div class="model-img"><img :src="require('@/assets/ico/icon' + item.id + '.png')" alt="" /></div>
        <div class="model-detail">
          <div class="model-name-container" :title="item.name">{{ item.name }}</div>
          <div class="model-remark" :title="item.description">{{ item.description }}</div>
        </div>
      </div>
    </div>
  </div>
  <!-- </a-modal> -->
</template>
<script>
import * as api from '@/api/wxSmuggle/caseEvent.js'
export default {
  props: ['category', 'isHaveTarget'],
  data() {
    return {
      modelList: [],
      isSelected: false
    }
  },
  created() {},
  mounted() {
    this.getModalList()
  },
  watch: {
    isHaveTarget(isHaveTarget) {
      console.log('isHaveTarget')
      console.log(isHaveTarget)
      if (!isHaveTarget) {
        this.modelList = this.modelList.filter(item => item.id === 7) //不选目标人，只有时空碰撞模型
      } else {
        this.getModalList()
      }
    }
  },
  methods: {
    getModalList() {
      api
        .modelList({ category: this.category })
        .then(res => {
          if (res.success) {
            this.modelList = res.result
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    close() {
      this.$emit('on-close')
    },
    submitModal() {
      this.$emit('submitList', this.modelList)
    },
    selectModel(index, item) {
      let modelList = this.modelList
      this.modelList = []
      modelList[index].selected = !item.selected
      modelList[index].id = item.id
      this.modelList = modelList
    },
    getData() {
      let selectIdList = []
      this.modelList.forEach(item => {
        if (item.selected) {
          selectIdList.push(item.id)
        }
      })
      // console.log("11111")
      console.log(selectIdList)
      return selectIdList
    },
    setData(idArr) {
      // console.log('idArr:' + idArr)
      // console.log(this.modelList)
      if (!this.isSelected) {
        // console.log('1111111111')
        idArr.forEach(id => {
          //根据属性id,返回该元素的索引
          let index = this.modelList.findIndex(item => item.id === id)
          this.$set(this.modelList[index], 'selected', true)
        })
        this.isSelected = true
      }
    }
  }
}
</script>
<style scoped>
.single-model-container {
  display: inline-block;
  position: relative;
  width: 32%;
  cursor: pointer;
  margin: 5px 5px 0 0;
  border: 1px solid #ffffff;
  padding: 5px;
}
.single-model-container:hover {
  border: 1px solid #184c97;
  /* color: #184C97 */
}
.selected-model {
  border: 1px solid #184c97;
  color: #184c97;
}
.single-model {
  height: 120px;
  margin: 5px auto;
  width: 270px;
  display: flex;
  align-items: center;
}
.model-img {
  display: inline-block;
  height: 70px;
  width: 70px;
  margin-right: 10px;
  /* float: left; */
  /* border: 1px dashed; */
}
.model-img img {
  height: 100%;
  width: 100%;
  border-radius: 50%;
}
.model-name-container {
  display: inline-block;
  width: 150px;
  font-size: 14px;
  font-weight: bold;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.model-remark {
  display: inline-block;
  height: 65px;
  /* overflow: hidden; */
  /* text-overflow: ellipsis; */
  /* white-space: nowrap; */
  /* width: 145px; */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.model-detail {
  display: inline-block;
  width: 165px;
  padding: 5px 10px;
}
</style>
